<template>
    <div id="app">
        <h1 class="h1">车主卡</h1>
        <hr>
        <el-row>
            <el-input v-model.trim="input" placeholder="请输入要查询的用户姓名或手机号" class="input1"></el-input>
            <!-- <el-date-picker v-model="value1" type="date" placeholder="选择初登日期" class="date"> -->
            <!-- </el-date-picker> -->
            <el-button type="primary" class="btn2" @click="handelList">查询</el-button>
        </el-row>
        <el-row class="but1">
            <el-button type="primary" class="btn3" >+ 添加车主卡</el-button>
            <el-button type="primary" class="btn3">+ 导出全部数据</el-button>
        </el-row>
        <el-row>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="id" width="40">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="80">
                </el-table-column>
                <el-table-column prop="phoneNum" label="手机号" width="180">
                </el-table-column>
                <el-table-column prop="carNum" label="车牌号" width="90">
                </el-table-column>
                <el-table-column prop="carBrandId" label="车辆品牌" width="80">
                </el-table-column>
                <el-table-column prop="carFirstLoginInt" label="车辆初登日期" width="180">
                </el-table-column>
                <el-table-column prop="mandatoryExpireDate" label="交强险到期日" width="180">
                </el-table-column>
                <el-table-column prop="mandatoryExpireDate" label="商业险到期日" width="180">
                </el-table-column>
                <el-table-column prop="applicationTime" label="申请时间" width="180">
                </el-table-column>
                <el-table-column label="操作" width="180" >
                    <template slot-scope="scope">
                        <el-button type="success" class="btn2" @click="handleEdit">修改
                        </el-button>
                        <el-button @click="deletes(scope.row.id)" type="danger" class="btn2">删除
                        </el-button>
                    </template>

                </el-table-column>
            </el-table>
            <div class="block" align="center">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-size="pageObj.pageSize" layout="total, prev, pager, next, jumper"
                    :total="pageObj.total">
                </el-pagination>
            </div>
        </el-row>
    </div>
</template>

<script>
import { Message } from 'element-ui';
export default {
    data() {
        return {

            // currentPage1: 5,
            // currentPage2: 5,
            // currentPage3: 5,
            currentPage4: 1,
           aaa:'',
            input: '',
            value1: '',
            pageObj: {
                current: 1,
                total: 0,
                pageSize: 10,
            },
            tableData: []

        }
    },
    created() {
        // 获取列表
        this.$axios({
            url: "/carOwner/list",
            method: "POST",
            data: {
                "limit": this.pageObj.pageSize,  //每页几条数据
                "page": this.pageObj.page,   //默认当前页
            }
        })
            .then(res => {
                // console.log(res);
                if (res.data.code === 0) {
                    this.tableData = res.data.data,
                        this.pageObj.total = res.data.count
                }
            })
    },
    methods: {
//  删除
deletes(id){
    console.log(id);
        this.$axios({
        url:"/carOwner/delete",
        method:'post',
        params:{
            id:val
            }
        
    })
     .then(res=>{
       console.log(res);
     })

},


        handleSizeChange(val) {
            this.pageObj.pageSize = val;
            this.pageObj.handelList();
        },
        handleCurrentChange(val) {
            this.current = val;
            this.handelList();
        },

        // 添加车主卡
        addDriver() {
            this.$router.push({path:'/adddriver'})
        },
        // 修改车主卡
        handleEdit() {
            this.$router.push('/modifydriver');
        },

      
        handelList() {
          
           
            this.$axios({
                url: "/carOwner/list",
                method: "post",
                params: {
                    name:this.input
                    },
            }).then((res) => {
                console.log(res.data);
                if (res.data.code == 0) {
                    this.tableData = res.data.data;
                    this.pageObj.total = res.data.count;
                }
            });
        }



    },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.h1 {
    padding-left: 40px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.input1 {
    width: 400px;
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 10px;
}

.but1 {
    padding-left: 30px;
    padding-top: 30px;
    padding-bottom: 20px;
}

.btn2 {
    height: 40px;
    width: 60px;
}

.btn3 {
    height: 40px;
    width: 120px;
}

.page {
    /* padding-left: 255px; */
    padding-top: 20px;
    text-align: center;
}

.date {
    padding-right: 15px;
}
</style>